<template>
  <div>
    <el-dialog title="我要加盟" :visible.sync="isOpen"  :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" width="700px">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules" status-icon>
        <el-form-item label="合伙人类型">
            <el-select v-model="form.value" placeholder="请选择" @change="change('form')">
              <el-option v-for="item in typePartner" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <template v-if="form.value == 'gong_si'">
          <el-form-item label="公司名称" prop="nameCustomer">
            <el-input v-model="form.nameCustomer"  placeholder="公司名称"></el-input>
          </el-form-item>
          <el-form-item label="公司规模" prop="memberCompany">
            <el-input v-model.number="form.memberCompany"  placeholder="公司规模"></el-input>
          </el-form-item>
        </template>
        <el-form-item label="预计开业时间" prop="partnerDate">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.partnerDate" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="联系地址" required>
          <el-col :span="12">
            <el-form-item   prop="selectedOptions3">
              <el-cascader :options="options" v-model="form.selectedOptions3"  @change="handleChange"> </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item   prop="addressDetail">
               <el-input v-model="form.addressDetail" placeholder="详细地址"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="联系人姓名"  prop="nameRelation">
          <el-input v-model="form.nameRelation" auto-complete="off" placeholder="联系人姓名"></el-input>
        </el-form-item>

        <el-form-item label="图像验证码" required>
          <el-col :span="8">
            <el-form-item  prop="validateCodeThen">
              <el-input v-model="form.validateCodeThen" auto-complete="off" placeholder="图像验证码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="6">
            <img width="100%" v-bind:src="src" @click="clickImg" style="cursor: pointer">
          </el-col>
           <el-col :span="8" v-if="resultCode == 1506" class="el-form-item_error">图形验证码错误</el-col>
        </el-form-item>

        <el-form-item label="联系电话" required>
          <el-col :span="12">
            <el-form-item   prop="phone">
              <el-input v-model="form.phone" auto-complete="off" placeholder="联系电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item   prop="msg">
              <el-input v-model="form.msg" auto-complete="off" placeholder="短信验证码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="5">
            <template v-if="disabled || tims == 0"><el-button type="primary" @click="getMsg">获取验证码</el-button></template>
            <template v-else><el-button type="primary" disabled>获取验证码 {{tims + 's'}}</el-button></template>
          </el-col>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark" placeholder="备注"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">加盟申请</el-button>
          <el-button @click="isClose('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</div>
</template>
<script>
  // import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
  import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
  import global from './global'
  export default {
    props: {
      share:{
        default:false
      },
      rCodeKey: {
        "default": function() {
          return []
        }
      }
    },
    data(){
      var checkmemberCompany = (rule, value, callback) => {
        if (value) {
          var arr = value.toString().length;
          setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'));
            }else if(arr > 10){
              callback(new Error('请输入不大于10位数字'));
            }else{
              callback();
            }
          }, 100);
        }else{
          callback();
        }
      };
      return {
        src:'',
        width:'200',
        height:'50',
        tims:'120',
        resultCode:'',
        createInterferenceLine:'1',
        interferenceLineNum:'10',
        randomCodeKey:'',
        macthnum:'',
        isOpen: false,
        disabled:true,
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          nameCustomer: '',
          region: '',
          memberCompany:'',
          partnerDate: '',
          addressDetail:'',
          phone:'',
          delivery: false,
          msg: '',
          resource: '',
          remark: '',
          value: 'gong_si',
          selectedOptions3:[],
          validateCodeThen:'',
          typeDataSource:'office_web'
        },
        rules: {
          nameCustomer: [
            { required: true, message: '公司名称必填', trigger: 'blur' },
            { min: 3, max: 64, message: '长度在 3 到 64 个字符', trigger: 'blur' }
          ],
          selectedOptions3: [
            { required: true, message: '省市区必填必填', trigger: 'blur' }
          ],
          addressDetail: [
            { required: true, message: '详细地址必填', trigger: 'blur' },
            { min: 0, max: 128, message: '长度在 0 到 128 个字符', trigger: 'blur' }
          ],
          nameRelation: [
            { required: true, message: '联系人姓名必填', trigger: 'blur' },
            { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }
          ],
          phone:[
            { required: true, message: '手机号码必填', trigger: 'blur' },
            { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
          ],
          validateCodeThen:[
            { required: true, message: '验证码必填', trigger: 'blur' },
            { min: 4, max: 4, message: '长度在 4个字符', trigger: 'blur' }
          ],
          msg:[
            { required: true, message: '验证码必填', trigger: 'blur' },
            { min: 4, max: 4, message: '长度在 4个字符', trigger: 'blur' }
          ],
          memberCompany:[
            { validator: checkmemberCompany, trigger: 'blur' }
          ]

        },
        options:regionData,
        typePartner: [{
          value: 'gong_si',
          label: '企业合伙人'
        }, {
          value: 'ge_ren',
          label: '个人合伙人'
        }],
      }
    },
    methods: {
      isClose(form){
        this.$emit('menuopen', !this.isOpen);
        this.$refs[form].resetFields();
        this.form.remark = "";
        this.disabled = true
      },
      clickImg(){
        this.randomCodeKey = parseInt(this.randomCodeKey + 1);
        console.log('randomCodeKey:'+this.randomCodeKey);
        this.src = global.apiGlobal+'imageValidate/fa/validateCode?width='+this.width + '&height='+ this.height + '&createInterferenceLine='+this.createInterferenceLine
        +'&interferenceLineNum='+this.interferenceLineNum + '&randomCodeKey='+ this.randomCodeKey
      },
      change(form){
        this.$refs[form].resetFields();
      },
      onSubmit(form) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            var url= global.apiGlobal+"partnerCustomer/save"
            var data = {
              typePartner:this.form.value,
              nameCustomer:(this.form.nameCustomer == "")?this.form.nameRelation:this.form.nameCustomer ,
              memberCompany:this.form.memberCompany,
              partnerDate:this.form.partnerDate,
              codeProvince:this.form.selectedOptions3[0],
              codeCity:this.form.selectedOptions3[1],
              codeArea:this.form.selectedOptions3[2],
              addressDetail:this.form.addressDetail,
              nameRelation:this.form.nameRelation,
              validateCodeThen:this.form.validateCodeThen,
              mobileRelation:this.form.phone,
              mobileCodeThen:this.form.msg,
              remark:this.form.remark,
              nameProvince:CodeToText[this.form.selectedOptions3 [0]],
              nameArea:CodeToText[this.form.selectedOptions3 [1]],
              nameCity:CodeToText[this.form.selectedOptions3 [2]],
              typeDataSource:this.form.typeDataSource,
            };
            // console.log(data);
            // return;
            this.$http.post(url,JSON.stringify(data)).then(function(data) {
              console.log(data)
              console.log(data.resultCode);
              if(data.body.resultCode == 0){
                this.$emit('menuopen', !this.isOpen);
                this.$refs[form].resetFields();
                this.form.remark = "";
                this.disabled = true;
                  this.$message({
                    message: '加盟申请已提交，稍后会有业务人员联系您！',
                    type: 'success'
                  });
              }else{
                this.$message.error(data.body.resultMsg);
              }
            },function(response){
              this.$message.error('内部错误');
            })
          } else {
            this.$message({
              message: '有验证未通过！',
              type: 'warning'
            });
            return false;
          }
        });
      },
      handleChange(value){
        this.form.selectedOptions3 = value;
      },
      getMsg(){
        if(this.form.validateCodeThen == ""){
          this.$refs.form.validateField('validateCodeThen');
          return;
        }

        if(this.form.phone == ""){
          this.$refs.form.validateField('phone');
          return;
        }
        var url= global.apiGlobal+"shortMsg/fa/sendJoinShortMsg?mobile="+this.form.phone+'&randomCodeKey='+this.randomCodeKey+'&validateCode='+this.form.validateCodeThen;
        var data = {};
        data.mobile = this.form.phone;
        data.randomCodeKey = this.randomCodeKey;
        data.validateCode = this.form.validateCodeThen;

        this.$http.post(url,JSON.stringify(data)).then(function(data){
          console.log(data.body.resultCode);
          if(data.status == '200'){
            if(data.body.resultCode == 1506){
              this.resultCode = 1506;
              console.log('图形验证码错误');

            }else{
              this.disabled = false;
              this.tims = 120;
              this.resultCode = "";
              var settim = window.setInterval(() => {
                 if(this.tims == 1){
                     window.clearInterval(settim);
                  }
                  return this.tims = this.tims  - 1;
              },1000);
            }
          }
        },function(response){
          console.log(response)
        })
      }
    },
    watch: {
      share: function(newVal,oldValue){
        this.isOpen = newVal;
      },
      rCodeKey:function(newVal,oldValue){
        this.randomCodeKey = newVal;
        this.src = global.apiGlobal+'imageValidate/fa/validateCode?width=200&height=50&createInterferenceLine=1&interferenceLineNum=10&randomCodeKey='+newVal
      }
    },
    created:function(){
      var url="http://jsonplaceholder.typicode.com/users";
      this.$http.get(url).then(function(data){
      },function(response){
        console.log(response)
      })
    }
  }
</script>

